<script>
import deleteIco from '@/assets/icons/delete.svg'

export default {
  name: 'post-item',
  data: () => ({ deleteIco }),
  props: { data: Object, handleDelete: Function },
  methods: {
    handleImg(url) {
      wx.previewImage({ urls: [url] })
    }
  }
}
</script>

<template>
    <div class="post-item">
      <img
        :src="data.img"
        class="image"
        mode="aspectFill"
        @click="()=>handleImg(data.img)"
      />
      <h2 class="date-bar">
        <span class="date">{{data.date}}</span>
        <img :src="deleteIco" class="delete-btn" @click="()=>handleDelete(data.id)"/>
      </h2>
      <p class="article">{{data.text}}</p>
    </div>
</template>

<style lang="scss" scoped>
.post-item {
  box-shadow: 0 0 5px #ccc;
  border-radius: 10px;
  border-bottom: 1px solid transparent;
  overflow: hidden;
  background-color: #fff;
  &:not(:last-child) {
    margin-bottom: 20px;
  }
}

.date-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 10px;
  font-size: 16px;
  color: $gray-font-color;
}

.delete-btn {
  flex-shrink: 0;
  width: 1.5em;
  height: 1.5em;
  margin-left: 10px;
}

.image {
  width: 100%;
  height: 500rpx;
}

.article {
  margin: 10px;
  font-size: 16px;
}
</style>
